//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：my.js
// 创建时间：2016年09月20日
// 创建人员：Panda
// 功能说明：退出登录modal
//################################

'use strict';

import React, {Component} from 'react';
import {
    View,
    TouchableOpacity,
    Text,
    StyleSheet,
    Dimensions,
    InteractionManager,
} from 'react-native';

import {
    UIConstants,
    Colors,
    FontSizes,
    PubSubTopics,
} from '../../common';

import PubSub from 'pubsub-js';

import Modal from '../../components/modal';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;

class LogoutModal extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            isOpen: false,
        };
    }

    openModal() {
        this.setState({
            isOpen: true,
        });
    }

    closeModal() {
        this.setState({
            isOpen: false,
        });
    }

    menuPressed(menuName) {
        InteractionManager.runAfterInteractions(() => {
            this.props.onMenuPress && this.props.onMenuPress(menuName);
        });
        
        this.setState({
            isOpen: false,
        });
    }

    onModalClosedOnBackCallback() {
        this.setState({
            isOpen: false,
        });
    }
    
    render() {
        return (
            <Modal isOpen={this.state.isOpen} backdropPressToClose={true} modalClosedOnBackCallback={() => {this.onModalClosedOnBackCallback()}}>
                <View style={styles.container}>
                    <View style={styles.menucontainer}>
                        <TouchableOpacity style={styles.menuitem} onPress={() => {this.menuPressed(UIConstants.my.signout)}}>
                            <Text style={styles.menuitemtext}>
                                {UIConstants.my.signout}
                            </Text>
                        </TouchableOpacity>
                        <View style={styles.menusplitter} />
                        <TouchableOpacity style={styles.menuitem} onPress={() => {this.menuPressed(UIConstants.my.closeapp)}}>
                            <Text style={styles.menuitemtext}>
                                {UIConstants.my.closeapp}
                            </Text>
                        </TouchableOpacity>
                        <View style={styles.menusplitter} />
                        <TouchableOpacity style={styles.menuitem} onPress={() => {this.menuPressed(UIConstants.my.cancel)}}>
                            <Text style={[styles.menuitemtext, {color: Colors.highlightGreen}]}>
                                {UIConstants.my.cancel}
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: WINDOW_WIDTH,
        height: WINDOW_HEIGHT,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'flex-end',
    },
    menucontainer: {
        borderRadius: 8,
        backgroundColor: Colors.soiMenuModalBackground,
        width:WINDOW_WIDTH-30,
        marginBottom: 8,
    },
    menuitem: {
        height:50,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
    },
    menuitemtext: {
        fontSize:FontSizes.soiMenuModalItem,
        color:Colors.soiMenuModalItem,
        textAlign:'center',
    },
    menusplitter: {
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderBottomColor:Colors.soiMenuModalSpliter,
    },
});

export default LogoutModal;